<script setup lang="ts">
import { useNav } from "@/layout/hooks/useNav";
import { onMounted, ref, watch } from "vue";
const { isCollapse } = useNav();
defineOptions({
  name: "Content"
});

// 选择预览模式框
const chooseViewModeShowRef = ref(null);
// 鼠标是否悬浮预览模式选择框
const hoverChooseViewModeShow = ref(false);
// 鼠标悬浮预览模式选择框消失的定时器
let hoverChooseViewModeShowInterval = null;
// 鼠标进入预览模式选择框
const mouseOverChooseViewMode = () => {
  if (hoverChooseViewModeShowInterval) {
    clearTimeout(hoverChooseViewModeShowInterval);
  }
  hoverChooseViewModeShow.value = true;
};
// 鼠标离开预览模式选择框
const mouseOutChooseViewMode = () => {
  hoverChooseViewModeShowInterval = setTimeout(() => {
    hoverChooseViewModeShow.value = false;
    hoverChooseViewModeShowInterval = null;
  }, 100);
};
const chooseViewModeListRef = ref(2098);
// 计算左侧距离
const reComputeLiftVal = () => {
  chooseViewModeListRef.value = isCollapse.value
    ? chooseViewModeShowRef.value.getBoundingClientRect().x - 141
    : chooseViewModeShowRef.value.getBoundingClientRect().x - 298;
};
watch(
  () => isCollapse.value,
  () => {
    reComputeLiftVal();
  }
);

onMounted(() => {
  window.addEventListener("resize", reComputeLiftVal);
});
</script>

<template>
  <div class="wp-s-core-pan__contain is-undefined-skin">
    <div class="wp-s-core-pan__header is-show-header">
      <div class="wp-s-core-pan__header-tool-bar">
        <div class="wp-s-core-pan__header-tool-bar--action">
          <div class="wp-s-agile-tool-bar is-header-tool">
            <div class="wp-s-agile-tool-bar__header is-header-tool">
              <div class="wp-s-agile-tool-bar__h-group">
                <div
                  class="u-button-group wp-s-agile-tool-bar__h-button-group is-main"
                >
                  <div
                    class="wp-s-agile-tool-bar__h-action is-need-left-sep is-main"
                  >
                    <a data-v-38f84988="" class="nd-upload-button"
                      ><button
                        data-v-38f84988=""
                        type="button"
                        class="u-button nd-file-list-toolbar-action-item u-button--primary u-button--small is-round is-has-icon"
                      >
                        <i class="u-icon u-icon-upper-shelf"></i
                        ><span>上传 </span>
                      </button>
                      <form
                        data-v-108d28cc=""
                        data-v-38f84988=""
                        action="javascript:void(0);"
                        class="nd-h5-form"
                      >
                        <input
                          data-v-108d28cc=""
                          title="点击选择文件"
                          multiple="true"
                          accept="*/*"
                          type="file"
                          name="html5uploader"
                          class="input"
                        />
                      </form>
                      <ul
                        data-v-38f84988=""
                        class="dropdown-list nd-common-float-menu"
                        style="display: none"
                      >
                        <li class="sub cursor-p">
                          上传文件
                          <form
                            data-v-108d28cc=""
                            action="javascript:void(0);"
                            class="nd-h5-form"
                          >
                            <input
                              data-v-108d28cc=""
                              title="点击选择文件"
                              multiple="true"
                              accept="*/*"
                              type="file"
                              name="html5uploader"
                              class="input"
                            />
                          </form>
                        </li>
                        <li class="sub cursor-p">
                          上传文件夹
                          <form
                            data-v-108d28cc=""
                            action="javascript:void(0);"
                            class="nd-h5-form"
                          >
                            <input
                              data-v-108d28cc=""
                              title="点击选择文件夹"
                              multiple="true"
                              accept="*/*"
                              type="file"
                              webkitdirectory="true"
                              name="html5uploader"
                              class="input"
                            />
                          </form>
                        </li></ul
                    ></a>
                  </div>
                </div>
              </div>
              <div class="wp-s-agile-tool-bar__h-group">
                <div
                  class="u-button-group wp-s-agile-tool-bar__h-button-group is-list"
                >
                  <div
                    class="wp-s-agile-tool-bar__h-action is-need-left-sep is-list"
                  >
                    <button
                      type="button"
                      class="u-button wp-s-agile-tool-bar__h-action-button u-button--text u-button--small"
                      title="新建文件夹"
                      style="height: 32px"
                    >
                      <i class="u-icon-add-folder"></i><span>新建文件夹 </span>
                    </button>
                  </div>
                  <div
                    class="wp-s-agile-tool-bar__h-action is-need-left-sep is-list"
                  >
                    <button
                      type="button"
                      class="u-button wp-s-agile-tool-bar__h-action-button u-button--text u-button--small"
                      title="新建在线文档"
                      style="height: 32px"
                    >
                      <i class="u-icon-newly-build"></i
                      ><span>新建在线文档 </span>
                    </button>
                  </div>
                  <div
                    class="wp-s-agile-tool-bar__h-action is-need-left-sep is-list"
                  >
                    <button
                      type="button"
                      class="u-button wp-s-agile-tool-bar__h-action-button u-button--text u-button--small"
                      title="云添加"
                      style="height: 32px"
                    >
                      <i class="u-icon-download"></i
                      ><span
                        >云添加

                        <div
                          class="wp-s-inner-popover tool-bar-h-dropDown-pop is-default-skin"
                          style="
                            width: 130px;
                            left: 50%;
                            top: 30px;
                            margin-left: -65px;
                          "
                        >
                          <div class="wp-s-inner-popover__content">
                            <div
                              class="u-button-group wp-s-agile-tool-bar__h-action-dropDown--child-group is-list"
                            >
                              <button
                                type="button"
                                class="u-button wp-s-agile-tool-bar__h-action-dropDown--child-button u-button--text u-button--small"
                                title="添加链接任务"
                                data-id="downloadLink"
                                style="height: 32px"
                              >
                                <span>添加链接任务 </span></button
                              ><button
                                type="button"
                                class="u-button wp-s-agile-tool-bar__h-action-dropDown--child-button u-button--text u-button--small"
                                title="添加BT任务"
                                data-id="downloadBT"
                                style="height: 32px"
                              >
                                <span>添加BT任务 </span>
                                <form
                                  data-v-108d28cc=""
                                  action="javascript:void(0);"
                                  class="nd-h5-form"
                                >
                                  <input
                                    data-v-108d28cc=""
                                    title="点击选择文件"
                                    multiple="true"
                                    accept=".torrent"
                                    type="file"
                                    name="html5uploader"
                                    class="input"
                                  />
                                </form>
                              </button>
                            </div>
                          </div></div
                      ></span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="wp-s-core-pan__header-tool-bar--customize">
          <div class="wp-s-search">
            <div
              class="u-input u-input--primary u-input--small u-input--suffix"
            >
              <input
                type="text"
                autocomplete="off"
                placeholder="搜索我的文件"
                class="u-input__inner"
              />
              <span class="u-input__suffix"
                ><span class="u-input__suffix-inner"
                  ><p>
                    <span class="wp-s-search__search-text"> 搜索 </span>
                  </p>
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="wp-s-core-pan__body is-show-header">
      <div class="wp-s-core-pan__body-contain is-has-detail">
        <div class="wp-s-core-pan__body-contain--nav">
          <div class="wp-s-pan-file-main__nav">
            <div class="wp-s-pan-file-main__nav-left">
              <div>
                <span class="wp-s-pan-file-main__nav-item"
                  ><span class="wp-s-pan-file-main__nav-item-title text-ellip"
                    >返回上一级</span
                  >
                  <span class="wp-s-pan-file-main__nav-item-sep">|</span></span
                >
                <span class="wp-s-pan-file-main__nav-item"
                  ><span class="wp-s-pan-file-main__nav-item-title text-ellip"
                    >全部文件</span
                  >
                  <span class="wp-s-pan-file-main__nav-item-sep"
                    >&gt;</span
                  ></span
                ><span class="wp-s-pan-file-main__nav-item is-disable-nav"
                  ><span class="wp-s-pan-file-main__nav-item-title text-ellip"
                    >workSpace</span
                  >
                  <span class="wp-s-pan-file-main__nav-item-sep"
                    >&gt;</span
                  ></span
                >
              </div>
            </div>
            <div class="wp-s-pan-file-main__nav-right is-show-detail">
              <span class="wp-s-pan-file-main__nav-right-count"> </span>
              <span
                class="wp-disk-popover-card-event__ref is-mode-pop is-web is-person is-default"
              >
                <span class="u-popover__reference-wrapper"
                  ><span
                    class="cursor-p wp-s-pan-file-main__nav-right-icon is-large inline-block-v-middle u-uicon u-popover__reference"
                    aria-describedby="u-popover-9191"
                    tabindex="0"
                    ><i
                      @mouseover="mouseOverChooseViewMode"
                      @mouseout="mouseOutChooseViewMode"
                      ref="chooseViewModeShowRef"
                      class="u-uicon__font u-icon-img-list"
                    ></i
                  ></span> </span
              ></span>
            </div>
            <div class="wp-s-pan-file-main__nav-detail-switch cursor-p">
              <span
                class="wp-s-pan-file-main__nav-detail-switch--icon is-large inline-block-v-middle u-uicon"
                ><i class="u-uicon__font u-icon-arrow-left"></i
              ></span>
              <span class="wp-s-pan-file-main__nav-detail-switch--title">
                展开
              </span>
            </div>
          </div>
        </div>
        <div class="wp-s-core-pan__body-contain--list is-show-nav">
          <div class="wp-s-pan-list s-pan-list-loading">
            <div class="wp-s-pan-list__contain">
              <div class="wp-s-file-grid-list clearfix">
                <div class="wp-s-file-grid-list__nav">
                  <label class="u-checkbox wp-s-file-grid-list__select-all"
                    ><span class="u-checkbox__input"
                      ><span class="u-checkbox__inner"></span
                      ><input
                        type="checkbox"
                        aria-hidden="false"
                        class="u-checkbox__original"
                        value="" /></span
                    ><span class="u-checkbox__label">全选 </span></label
                  >
                </div>
                <div
                  class="wp-s-file-grid-list__body mouse-choose-list is-grid-list"
                >
                  <div
                    class="mouse-choose-box"
                    style="padding-top: 0px; padding-bottom: 0px"
                  >
                    <div
                      data-id="928058972670192"
                      class="wp-s-file-grid-list__item text-center cursor-p mouse-choose-item"
                    >
                      <div class="wp-s-file-grid-list__item-top">
                        <label
                          class="u-checkbox wp-s-file-grid-list__item-top-select"
                          ><span class="u-checkbox__input"
                            ><span class="u-checkbox__inner"></span
                            ><input
                              type="checkbox"
                              aria-hidden="false"
                              class="u-checkbox__original"
                              value=""
                          /></span>
                        </label>
                        <div class="wp-s-file-grid-list__item-top-action">
                          <div
                            class="wp-s-agile-tool-bar is-grid-tool"
                            skin="default"
                          >
                            <div
                              class="wp-s-agile-tool-bar__grid is-default-skin is-grid-tool"
                              skin-conf="[object Object]"
                              tools-skin-conf="[object Object]"
                              container-width=""
                            >
                              <div
                                class="wp-s-agile-tool-bar__h-group"
                                skin="default"
                              >
                                <div
                                  class="u-button-group wp-s-agile-tool-bar__h-button-group is-list is-has-more"
                                >
                                  <div
                                    class="wp-s-agile-tool-bar__h-action is-need-left-sep is-list"
                                  >
                                    <button
                                      type="button"
                                      class="u-button wp-s-agile-tool-bar__h-action-button u-button--text u-button--small"
                                      title="分享"
                                      style="height: 18px"
                                    >
                                      <i class="u-icon-share"></i><span> </span>
                                    </button>
                                  </div>
                                  <div
                                    class="wp-s-agile-tool-bar__h-action is-need-left-sep is-list"
                                  >
                                    <button
                                      type="button"
                                      class="u-button wp-s-agile-tool-bar__h-action-button u-button--text u-button--small"
                                      title="下载"
                                      style="height: 18px"
                                    >
                                      <i class="u-icon-download"></i
                                      ><span> </span>
                                    </button>
                                  </div>
                                </div>
                              </div>
                              <div
                                class="wp-s-agile-tool-bar__h-more-group is-more is-grid-tool is-default-skin is-show-list"
                                innerheight=""
                              >
                                <button
                                  type="button"
                                  class="u-button wp-s-agile-tool-bar__h-more-group--button is-need-left-sep u-button--text u-button--small is-more is-grid-tool is-default-skin is-show-list"
                                  title="更多"
                                  style="height: 18px"
                                >
                                  <i class="u-icon-more"></i
                                  ><span>
                                    <div
                                      class="wp-s-inner-popover tool-bar-more-group-pop is-default-skin"
                                      style="
                                        width: 130px;
                                        left: 50%;
                                        top: 18px;
                                        margin-left: -65px;
                                      "
                                    >
                                      <div class="wp-s-inner-popover__content">
                                        <div
                                          class="wp-s-agile-tool-bar__v-group"
                                        >
                                          <div
                                            class="u-button-group wp-s-agile-tool-bar__v-button-group is-list is-default-skin"
                                          >
                                            <div
                                              class="wp-s-agile-tool-bar__item"
                                            >
                                              <div
                                                class="wp-s-agile-tool-bar__v-action is-list"
                                              >
                                                <button
                                                  type="button"
                                                  class="u-button wp-s-agile-tool-bar__v-action-button u-button--text u-button--small"
                                                  title="删除"
                                                  style="height: 30px"
                                                >
                                                  <i class="u-icon-delete"></i
                                                  ><span>删除 </span>
                                                </button>
                                              </div>
                                            </div>
                                            <div
                                              class="wp-s-agile-tool-bar__item"
                                            >
                                              <div
                                                class="wp-s-agile-tool-bar__v-action is-list"
                                              >
                                                <button
                                                  type="button"
                                                  class="u-button wp-s-agile-tool-bar__v-action-button u-button--text u-button--small"
                                                  title="重命名"
                                                  style="height: 30px"
                                                >
                                                  <i class="u-icon-rename"></i
                                                  ><span>重命名 </span>
                                                </button>
                                              </div>
                                            </div>
                                            <div
                                              class="wp-s-agile-tool-bar__item"
                                            >
                                              <div
                                                class="wp-s-agile-tool-bar__v-action is-list"
                                              >
                                                <button
                                                  type="button"
                                                  class="u-button wp-s-agile-tool-bar__v-action-button u-button--text u-button--small"
                                                  title="复制"
                                                  style="height: 30px"
                                                >
                                                  <i class="u-icon-copy"></i
                                                  ><span>复制 </span>
                                                </button>
                                              </div>
                                            </div>
                                            <div
                                              class="wp-s-agile-tool-bar__item"
                                            >
                                              <div
                                                class="wp-s-agile-tool-bar__v-action is-list"
                                              >
                                                <button
                                                  type="button"
                                                  class="u-button wp-s-agile-tool-bar__v-action-button u-button--text u-button--small"
                                                  title="移动"
                                                  style="height: 30px"
                                                >
                                                  <i class="u-icon-move"></i
                                                  ><span>移动 </span>
                                                </button>
                                              </div>
                                            </div>
                                            <div
                                              class="wp-s-agile-tool-bar__item"
                                            >
                                              <div
                                                class="wp-s-agile-tool-bar__v-action is-list"
                                              >
                                                <button
                                                  type="button"
                                                  class="u-button wp-s-agile-tool-bar__v-action-button u-button--text u-button--small"
                                                  title="导出文件目录"
                                                  style="height: 30px"
                                                >
                                                  <i
                                                    class="u-icon-remove-file"
                                                  ></i
                                                  ><span>导出文件目录 </span>
                                                </button>
                                              </div>
                                            </div>
                                            <div
                                              class="wp-s-agile-tool-bar__item"
                                            >
                                              <div
                                                class="wp-s-agile-tool-bar__v-action is-list"
                                              >
                                                <button
                                                  type="button"
                                                  class="u-button wp-s-agile-tool-bar__v-action-button u-button--text u-button--small"
                                                  title="共享"
                                                  style="height: 30px"
                                                >
                                                  <i
                                                    class="u-icon-group icon-size-enjoy-together"
                                                  ></i
                                                  ><span>共享 </span>
                                                </button>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div></span
                                  >
                                </button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div
                        class="wp-s-file-grid-list__item-wrapper"
                        draggable="true"
                      >
                        <div class="wp-s-file-list-drag-copy">
                          <div class="wp-s-file-list-drag-copy__item is-id-1">
                            <img
                              src="https://staticwx.cdn.bcebos.com/mini-program/images/ic_file2.png"
                              class="wp-s-file-list-drag-copy__item-title-icon img-before-icon iconfont icon-pure-color"
                            />
                            <span
                              class="wp-s-file-list-drag-copy__item-title-text inline-block-v-middle text-ellip"
                              >测试</span
                            >
                          </div>
                        </div>
                        <div>
                          <div class="wp-s-file-grid-list__item-icon-wrapper">
                            <img
                              src=""
                              alt="folder"
                              class="wp-s-file-grid-list__item-icon u-file-icon u-file-icon--grid"
                            />
                          </div>
                          <div class="wp-s-file-grid-list__item-title-wrapper">
                            <p class="wp-s-file-grid-list__item-title">测试</p>
                            <p
                              class="wp-s-file-grid-list__item-desc text-ellip"
                            >
                              10-05 14:29
                            </p>
                            <div
                              class="wp-s-inner-popover grid-list-name-pop is-default-skin"
                              style="
                                width: 160px;
                                left: 50%;
                                top: 60px;
                                margin-left: -80px;
                              "
                            >
                              <div class="wp-s-inner-popover__content">
                                <div class="wp-s-file-grid-list__item-detail">
                                  <p
                                    class="wp-s-file-grid-list__item-detail-item pop-item-detail-item"
                                  >
                                    名称：测试
                                  </p>
                                  <p
                                    class="wp-s-file-grid-list__item-detail-item pop-item-detail-item"
                                  >
                                    大小：-
                                  </p>
                                  <p
                                    class="wp-s-file-grid-list__item-detail-item pop-item-detail-item"
                                  >
                                    修改日期：2024-10-05 14:29
                                  </p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      data-id="170135752582033"
                      class="wp-s-file-grid-list__item text-center cursor-p mouse-choose-item"
                    >
                      <div class="wp-s-file-grid-list__item-top">
                        <label
                          class="u-checkbox wp-s-file-grid-list__item-top-select"
                          ><span class="u-checkbox__input"
                            ><span class="u-checkbox__inner"></span
                            ><input
                              type="checkbox"
                              aria-hidden="false"
                              class="u-checkbox__original"
                              value=""
                          /></span>
                        </label>
                        <div class="wp-s-file-grid-list__item-top-action">
                          <div
                            class="wp-s-agile-tool-bar is-grid-tool"
                            skin="default"
                          >
                            <div
                              class="wp-s-agile-tool-bar__grid is-default-skin is-grid-tool"
                              skin-conf="[object Object]"
                              tools-skin-conf="[object Object]"
                              container-width=""
                            >
                              <div
                                class="wp-s-agile-tool-bar__h-group"
                                skin="default"
                              >
                                <div
                                  class="u-button-group wp-s-agile-tool-bar__h-button-group is-list is-has-more"
                                >
                                  <div
                                    class="wp-s-agile-tool-bar__h-action is-need-left-sep is-list"
                                  >
                                    <button
                                      type="button"
                                      class="u-button wp-s-agile-tool-bar__h-action-button u-button--text u-button--small"
                                      title="云解压"
                                      style="height: 18px"
                                    >
                                      <i class="u-icon-unzip"></i><span> </span>
                                    </button>
                                  </div>
                                  <div
                                    class="wp-s-agile-tool-bar__h-action is-need-left-sep is-list"
                                  >
                                    <button
                                      type="button"
                                      class="u-button wp-s-agile-tool-bar__h-action-button u-button--text u-button--small"
                                      title="分享"
                                      style="height: 18px"
                                    >
                                      <i class="u-icon-share"></i><span> </span>
                                    </button>
                                  </div>
                                </div>
                              </div>
                              <div
                                class="wp-s-agile-tool-bar__h-more-group is-more is-grid-tool is-default-skin is-show-list"
                                innerheight=""
                              >
                                <button
                                  type="button"
                                  class="u-button wp-s-agile-tool-bar__h-more-group--button is-need-left-sep u-button--text u-button--small is-more is-grid-tool is-default-skin is-show-list"
                                  title="更多"
                                  style="height: 18px"
                                >
                                  <i class="u-icon-more"></i
                                  ><span>
                                    <div
                                      class="wp-s-inner-popover tool-bar-more-group-pop is-default-skin"
                                      style="
                                        width: 130px;
                                        left: 50%;
                                        top: 18px;
                                        margin-left: -65px;
                                      "
                                    >
                                      <div class="wp-s-inner-popover__content">
                                        <div
                                          class="wp-s-agile-tool-bar__v-group"
                                        >
                                          <div
                                            class="u-button-group wp-s-agile-tool-bar__v-button-group is-list is-default-skin"
                                          >
                                            <div
                                              class="wp-s-agile-tool-bar__item"
                                            >
                                              <div
                                                class="wp-s-agile-tool-bar__v-action is-list"
                                              >
                                                <button
                                                  type="button"
                                                  class="u-button wp-s-agile-tool-bar__v-action-button u-button--text u-button--small"
                                                  title="下载"
                                                  style="height: 30px"
                                                >
                                                  <i class="u-icon-download"></i
                                                  ><span>下载 </span>
                                                </button>
                                              </div>
                                            </div>
                                            <div
                                              class="wp-s-agile-tool-bar__item"
                                            >
                                              <div
                                                class="wp-s-agile-tool-bar__v-action is-list"
                                              >
                                                <button
                                                  type="button"
                                                  class="u-button wp-s-agile-tool-bar__v-action-button u-button--text u-button--small"
                                                  title="删除"
                                                  style="height: 30px"
                                                >
                                                  <i class="u-icon-delete"></i
                                                  ><span>删除 </span>
                                                </button>
                                              </div>
                                            </div>
                                            <div
                                              class="wp-s-agile-tool-bar__item"
                                            >
                                              <div
                                                class="wp-s-agile-tool-bar__v-action is-list"
                                              >
                                                <button
                                                  type="button"
                                                  class="u-button wp-s-agile-tool-bar__v-action-button u-button--text u-button--small"
                                                  title="重命名"
                                                  style="height: 30px"
                                                >
                                                  <i class="u-icon-rename"></i
                                                  ><span>重命名 </span>
                                                </button>
                                              </div>
                                            </div>
                                            <div
                                              class="wp-s-agile-tool-bar__item"
                                            >
                                              <div
                                                class="wp-s-agile-tool-bar__v-action is-list"
                                              >
                                                <button
                                                  type="button"
                                                  class="u-button wp-s-agile-tool-bar__v-action-button u-button--text u-button--small"
                                                  title="复制"
                                                  style="height: 30px"
                                                >
                                                  <i class="u-icon-copy"></i
                                                  ><span>复制 </span>
                                                </button>
                                              </div>
                                            </div>
                                            <div
                                              class="wp-s-agile-tool-bar__item"
                                            >
                                              <div
                                                class="wp-s-agile-tool-bar__v-action is-list"
                                              >
                                                <button
                                                  type="button"
                                                  class="u-button wp-s-agile-tool-bar__v-action-button u-button--text u-button--small"
                                                  title="移动"
                                                  style="height: 30px"
                                                >
                                                  <i class="u-icon-move"></i
                                                  ><span>移动 </span>
                                                </button>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div></span
                                  >
                                </button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div
                        class="wp-s-file-grid-list__item-wrapper"
                        draggable="true"
                      >
                        <div class="wp-s-file-list-drag-copy">
                          <div class="wp-s-file-list-drag-copy__item is-id-1">
                            <img
                              src="https://staticwx.cdn.bcebos.com/mini-program/images/ic_compress_v2.png"
                              class="wp-s-file-list-drag-copy__item-title-icon img-before-icon iconfont icon-pure-color"
                            />
                            <span
                              class="wp-s-file-list-drag-copy__item-title-text inline-block-v-middle text-ellip"
                              >73583最新哔哩bilibili视频弹幕播放器带后台版本完整无错.rar</span
                            >
                          </div>
                        </div>
                        <div>
                          <div class="wp-s-file-grid-list__item-icon-wrapper">
                            <img
                              src=""
                              alt="zip"
                              class="wp-s-file-grid-list__item-icon u-file-icon u-file-icon--grid"
                            />
                          </div>
                          <div class="wp-s-file-grid-list__item-title-wrapper">
                            <p class="wp-s-file-grid-list__item-title">
                              73583最新哔哩bilibili视...
                            </p>
                            <p
                              class="wp-s-file-grid-list__item-desc text-ellip"
                            >
                              1.5M
                            </p>
                            <div
                              class="wp-s-inner-popover grid-list-name-pop is-default-skin"
                              style="
                                width: 160px;
                                left: 50%;
                                top: 60px;
                                margin-left: -80px;
                              "
                            >
                              <div class="wp-s-inner-popover__content">
                                <div class="wp-s-file-grid-list__item-detail">
                                  <p
                                    class="wp-s-file-grid-list__item-detail-item pop-item-detail-item"
                                  >
                                    名称：73583最新哔哩bilibili视频弹幕播放器带后台版本完整无错.rar
                                  </p>
                                  <p
                                    class="wp-s-file-grid-list__item-detail-item pop-item-detail-item"
                                  >
                                    大小：1.5M
                                  </p>
                                  <p
                                    class="wp-s-file-grid-list__item-detail-item pop-item-detail-item"
                                  >
                                    修改日期：2024-09-17 16:29
                                  </p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div
                    style="
                      background-color: rgba(139, 191, 249, 0.5);
                      border: 1px solid rgb(19, 98, 180);
                      top: 0px;
                      left: 0px;
                      width: 0px;
                      height: 0px;
                      display: none;
                      z-index: -999;
                    "
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="wp-s-core-pan__footer"></div>
  </div>

  <!-- 文件预览模式选择框 -->
  <div
    @mouseover="mouseOverChooseViewMode"
    @mouseout="mouseOutChooseViewMode"
    role="tooltip"
    id="u-popover-8133"
    aria-hidden="true"
    class="u-popover u-popper wp-disk-popover-card-event__pop-card pop-no-padding is-hide-arrow is-mode-pop"
    tabindex="0"
    :style="{
      transformOrigin: 'center top',
      zIndex: '2033',
      top: '110px',
      left: chooseViewModeListRef + 'px',
      display: hoverChooseViewModeShow ? '' : 'none'
    }"
  >
    <!---->
    <div class="wp-disk-popover-card-event__pop-content" style="width: 130px">
      <div
        class="u-button-group wp-s-pan-file-main__button-group is-vertical is-mode-pop"
      >
        <button
          type="button"
          class="u-button wp-s-pan-file-main__button u-button--text u-button--small"
        >
          <!----><i class="u-icon-check"></i><span>列表模式 </span></button
        ><button
          type="button"
          class="u-button wp-s-pan-file-main__button u-button--text u-button--small is-selected"
        >
          <!----><i class="u-icon-check"></i><span>缩略模式 </span></button
        ><button
          type="button"
          class="u-button wp-s-pan-file-main__button u-button--text u-button--small"
        >
          <!----><i class="u-icon-check"></i><span>大图模式 </span>
        </button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("../../assets/css/baidu-icon.css");
@import url("../../assets/css/baidu.css");
</style>
